<template>
	<Layout>
		<Form ref="form1" :model="dataToQuery" :label-width="100">
			<Row class="query-form">
				<Col span="7">
						<FormItem label="二级集团：">
								<two-level-org class="query-form-el" org-code v-model="dataToQuery.twoLevelOrgCode" />
						</FormItem>
				</Col>
				<Col span="7">
				<FormItem label="所属单位：">
					<company-select v-model="dataToQuery.companyName" style="width:100%" />
					<!-- <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgname='setQueryOrgName'
						:orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}">
					</cascader-dom> -->
				</FormItem>
				</Col>
				<Col span="6">
				<FormItem label="检修年度：">
					<DatePicker class="query-form-el" type="year" placeholder="请选择年度" v-model="dataToQuery.year1"
						:clearable="false"
						@on-change="()=>{if(dataToQuery.year1 instanceof Date){dataToQuery.year = dataToQuery.year1.getFullYear().toString()}}">
					</DatePicker>
				</FormItem>
				</Col>

				<Col span="4" v-if="!switchFlag">
				<!--<Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>-->
				<Button @click="reset1" class="ivu-btn-reset">重置</Button>
				<Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
				</Col>
			</Row>

		</Form>
		<Row :gutter="24" style="margin-top: 15px">
			<Col span="12">
			<Card dis-hover>
				<div ref="echart1" :style="{height: '200px'}"></div>
			</Card>
			</Col>
			<Col span="12">
			<Card dis-hover>
				<div ref="echart2" :style="{height: '200px'}"></div>
			</Card>
			</Col>
		</Row>
		<Row :gutter="24" style="margin-top: 15px">
			<Col span="12">
			<Card dis-hover>
				<div ref="echart3" :style="{height: '200px'}"></div>
			</Card>
			</Col>
			<Col span="12">
			<Card dis-hover>
				<div ref="echart4" :style="{height: '200px'}"></div>
			</Card>
			</Col>
		</Row>
		<Row class="query-form">
			<Col span="22" style="margin-top: 10px;margin-left: 10px">
			<p>外部维修队伍最多前5家</p>
			</Col>
			<Col span="1">
			<!-- <Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="exportFormSubmit">导出</Button> -->
			</Col>
		</Row>
		<Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" :loading='pageStatus.loading' border
			:columns="examSelectColumns" :data="dataTable">
		</Table>
		<!-- <Row style="margin-right:10px;">
			<Col span="24">
			<Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
				@on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
				show-elevator />
			</Col>
		</Row> -->
		<Modal :title="modalTitle" :transfer=false v-model="modelVisible" :width=1000 footer-hide>
			<Table v-if="examSelectWorkVisible" :loading="pagedata1.loading" size="small" class="table" :height=450
				no-data-text="没有查询到相关数据!" highlight-row stripe border :columns="examSelectWorkColumns" width="100%"
				:data="examSelectWorkInfo">
			</Table>
			<Table v-if="examSelectVisible" :loading="pagedata1.loading" size="small" class="table" :height=450
				no-data-text="没有查询到相关数据!" highlight-row stripe border :columns="examSelectColumns" width="100%"
				:data="examSelectInfo">
			</Table>
			<Page :total="pagedata1.total" :current="pagedata1.fromPage" :pageSize="pagedata1.pageSize"
				@on-change="pageChange1" @on-page-size-change='pageSizeChange1' show-total show-sizer show-elevator />
		</Modal>

		<Modal title="企业检修计划详情" :transfer=false :mask-closable="false" v-model="modelExam"
			v-if="dataToView && modelExam" :width=850 class-name='limit-height-dialog'>
			<Row>
				<Col span="24">
				<Form class="modal-view-detail" :show-message="false" :model="dataToView" :label-width="140">
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="11">
						<FormItem label='企业名称：' prop='companyId'>
							<div>{{dataToView.companyName}}</div>
						</FormItem>
						</Col>
						<Col span="11">
						<FormItem label='类别：' prop='categories'>
							<div>{{dataToView.categoriesName}}</div>
						</FormItem>
						</Col>
					</Row>
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="11">
						<FormItem label='涉及的危险作业类别：' prop='hazardousWorkItemArr'>
							<div>{{ dataToView.hazardousWorkItemName }}</div>
						</FormItem>
						</Col>
						<Col span="11">
						<FormItem label='检维修内容名称：' prop='examinationName'>
							<div>{{ dataToView.examinationName }}</div>
						</FormItem>
						</Col>
					</Row>
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="23">
						<FormItem label='计划检修范围：' prop='examinationRange'>
							<div>{{ dataToView.examinationRange }}</div>
						</FormItem>
						</Col>
					</Row>
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="11">
						<FormItem label='计划检修开始时间：' prop='projectStartSchedule'>
							<div>{{ renderViewDate(dataToView.projectStartSchedule)}}</div>
						</FormItem>
						</Col>
						<Col span="11">
						<FormItem label='计划检修结束时间：' prop='projectEndSchedule'>
							<div>{{ renderViewDate(dataToView.projectEndSchedule) }}</div>
						</FormItem>
						</Col>
					</Row>
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="11">
						<FormItem label='维修主管部门：' prop='maintenanceDepartment'>
							<div>{{ dataToView.maintenanceDepartment }}</div>
						</FormItem>
						</Col>
						<Col span="11">
						<FormItem label='检维修工作负责人：' prop='maintenanceChargePerson'>
							<div>{{ dataToView.maintenanceChargePerson }}</div>
						</FormItem>
						</Col>
					</Row>
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="11">
						<FormItem label='外协队伍数量：' prop='teamNumbe'>
							<div>{{ dataToView.teamNumbe }}</div>
						</FormItem>
						</Col>
						<Col span="11">
						<FormItem label='检修人数：' prop='staffNumber'>
							<div>{{ dataToView.staffNumber }}</div>
						</FormItem>
						</Col>
					</Row>
					<Row>
						<Col span="23" class="query-form" style="margin-left: 15px">
						<Table highlight-row stripe border style="margin-top:10px;margin-bottom: 10px" :max-height="350"
							:columns="columns2" :data="dataToView.examConstructionItems">
						</Table>
						</Col>
					</Row>
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="23">
						<FormItem label="检修计划：">
							<div v-show="dataToView.idFiles.filter(t=>t.field==='1').length>0"
								v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='1')">
								<a @click="downloadFiles(item,index)"><span
										style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
								<Progress v-show="uploadListVisible[item.id]"
									:percent="uploadListPercent[index]"></Progress>
							</div>
						</FormItem>
						</Col>
					</Row>
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="23">
						<FormItem label="安全方案：">
							<div v-show="dataToView.idFiles.filter(t=>t.field==='2').length>0"
								v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='2')">
								<a @click="downloadFiles(item,index)"><span
										style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
								<Progress v-show="uploadListVisible[item.id]"
									:percent="uploadListPercent[index]"></Progress>
							</div>
						</FormItem>
						</Col>
					</Row>
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="23">
						<FormItem label="其他：">
							<div v-show="dataToView.idFiles.filter(t=>t.field==='3').length>0"
								v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='3')">
								<a @click="downloadFiles(item,index)"><span
										style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
								<Progress v-show="uploadListVisible[item.id]"
									:percent="uploadListPercent[index]"></Progress>
							</div>
						</FormItem>
						</Col>
					</Row>
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="23">
						<FormItem label='备注：' prop='remarks'>
							<div>{{dataToView.remarks}}</div>
						</FormItem>
						</Col>
					</Row>
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="11">
						<FormItem label='填报人：' prop='createUserName'>
							<div>{{ dataToView.createUserName }}</div>
						</FormItem>
						</Col>
						<Col span="11">
						<FormItem label='填报时间：' prop='createDate'>
							<div>{{ renderViewDate(dataToView.createDate) }}</div>
						</FormItem>
						</Col>
					</Row>
				</Form>
				</Col>
			</Row>
			<div slot="footer">
				<Button class='ivu-btn-save' @click="modelExam=false">关闭</Button>
			</div>
		</Modal>

	</Layout>
</template>

<script>
	import echarts from "echarts";
	import {
		Api
	} from '@/api/index.js'
	import pageCommonFunction from '@/components/pageCommonFunction.js'
	import {
		sessionStorage
	} from '@/common/cacheUtils.js';

	var cascaderDom = () => import('@/components/cascader-dom.vue');

	export default {
		components: {
			cascaderDom
		},
		data() {
			return {
				...this.createCommonDataField(),
				companyId: sessionStorage('userId').getObject('userId').companyId,
				columns1: [{
						title: '序号',
						width: 65,
						align: 'center',
						render: this.indexColumnsRender
					},
					{
						minWidth: 200,
						title: '所属单位',
						align: 'center',
						key: 'companyName',
					},
					{
						minWidth: 90,
						title: '维修数量',
						align: 'center',
						children: [{
								minWidth: 90,
								title: '日常维修',
								align: 'center',
								key: 'r2c1',
							},
							{
								minWidth: 90,
								title: '中修',
								align: 'center',
								key: 'r2c2',
							},
							{
								minWidth: 90,
								title: '大修',
								align: 'center',
								key: 'r2c3',
							},
							{
								minWidth: 90,
								title: '抢修',
								align: 'center',
								key: 'r2c4',
							},
						]
					},
					{
						minWidth: 90,
						title: '正在进行维修数量',
						align: 'center',
						children: [{
								minWidth: 90,
								title: '日常维修',
								align: 'center',
								key: 'r1c1',
							},
							{
								minWidth: 90,
								title: '中修',
								align: 'center',
								key: 'r1c2',
							},
							{
								minWidth: 90,
								title: '大修',
								align: 'center',
								key: 'r1c3',
							},
							{
								minWidth: 90,
								title: '抢修',
								align: 'center',
								key: 'r1c4',
							},
						]
					},
				],
				dataMap: {},
				tableHeight: 10,
				// api
				queryUrl: Api.queryExamRecords.replace('list', 'work/statistics'),
				exportUrl: Api.queryExamRecords.replace('list', 'work/statistics/export'),

				currentUser: JSON.parse(sessionStorage('userId').get('userId')),

				pagedata1: {
					total: 0,
					pageSize: 10,
					currentPage: 1,
				},
				echartsName: '',
				modelVisible: false,
				modalTitle: '',
				examSelectWorkVisible: false,
				examSelectWorkInfo: [],
				examSelectWorkColumns: [{
						title: '序号',
						width: 65,
						fixed: 'left',
						align: 'center',
						render: (h, params) => {
							return h('span', params.index + (this.pagedata1.currentPage - 1) * this.pagedata1
								.pageSize + 1);
						}
					},
					{
						key: 'companyName',
						title: '企业名称',
						align: 'center',
						minWidth: 200
					},
					{
						key: 'repairStatus',
						title: '维修状态',
						minWidth: 100,
						align: 'center',
					},
					{
						key: 'isPlan',
						title: '是否计划内维修',
						minWidth: 100,
						align: 'center',
					},
					{
						key: 'examinationName',
						title: '检维修内容名称',
						minWidth: 200,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('A', {
									style: {
					   		fontSize: '12px',
										color: params.row.isPlan === '计划内' ? '' : '#717477',
										pointerEvents: params.row.isPlan === '计划内' ? '' : 'none'
									},
									on: {
										click: () => {
											this.viewModelExam(params.row)
										}
									}
								}, params.row.examinationName),
							])
						}
					},
					{
						key: 'repairStartTime',
						title: '检修实际开始时间',
						minWidth: 120,
						align: 'center',
						render: this.renderCellDate
					},
					{
						key: 'repairEndTime',
						title: '检维修作业结束时间',
						minWidth: 120,
						align: 'center',
						render: this.renderCellDate
					},
					{
						key: 'remarks',
						title: '备注',
						minWidth: 200,
						align: 'center',
						tooltip: true
					},
				],

				examSelectVisible: false,
				examSelectInfo: [],
				examSelectColumns: [{
						title: '序号',
						width: 65,
						fixed: 'left',
						align: 'center',
						render: (h, params) => {
							if(params.row.id === '-1' && params.index == 0) return h('span', "汇总");
							return h('span', params.index-(this.examSelectVisible?1:0) + (this.pagedata1.currentPage - 1) * this.pagedata1.pageSize + 1);
						}
					},
					{
						key: 'companyName',
						title: '企业名称',
						align: 'center',
						minWidth: 200
					},
					{
						key: 'repairStatus',
						title: '维修状态',
						minWidth: 100,
						align: 'center',
					},
					{
						key: 'examinationName',
						title: '检维修内容名称',
						minWidth: 150,
						align: 'center',
						tooltip: true
					},
					{
						key: 'examinationRange',
						title: '计划检修范围',
						minWidth: 150,
						align: 'center',
						tooltip: true
					},
					{
						key: 'categoriesName',
						title: '类别',
						align: 'center',
						width: 120,
					},
					{
						key: 'hazardousWorkItemName',
						title: '涉及的危险作业类别',
						align: 'center',
						minWidth: 120,
						tooltip: true
					},
					{
						key: 'otherHazardous',
						title: '具体危险作业类别',
						align: 'center',
						minWidth: 120,
						tooltip: true
					},
					{
						key: 'projectStartSchedule',
						title: '计划开始时间',
						minWidth: 100,
						align: 'center',
						render: this.renderCellDate
					},
					{
						key: 'projectEndSchedule',
						title: '计划结束时间',
						minWidth: 100,
						align: 'center',
						render: this.renderCellDate
					},
					// { key:'teamName',title: '外协队伍名称',minWidth: 110,  align: 'center' },
					{
						key: 'teamNumbe',
						title: '外协队伍数量',
						minWidth: 110,
						align: 'center'
					},
					{
						key: 'maintenanceDepartment',
						title: '维修主管部门',
						minWidth: 110,
						align: 'center'
					},
					{
						key: 'maintenanceChargePerson',
						title: '检维修工作负责人',
						minWidth: 110,
						align: 'center'
					},
					{
						key: 'staffNumber',
						title: '检修人数',
						minWidth: 90,
						align: 'center'
					},
					{
						key: 'repairEndTime',
						title: '检修完成时间',
						minWidth: 100,
						align: 'center',
						render: this.renderCellDate
					},
					{
						key: 'remarks',
						title: '备注',
						minWidth: 200,
						align: 'center',
						tooltip: true
					},
					{
						title: '操作',
						key: 'action',
						fixed: 'right',
					 width: 80,
						align: 'center',
						render: (h, params) => {
							 if (params.row.id === '-1') {return;}
							return h('div', [
								h('A', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										fontSize: '13px',
									},
									on: {
										click: () => {
											this.viewModelExam({
												examConstruction: params.row
											})
										}
									}
					  	}, '详情'),
							])
					 }
					}
				],
				columns2: [{
						title: '序号',
						width: 70,
						align: 'center',
						render: this.indexColumnsRender
					},
					{
						key: 'maintenanceName',
						title: '维修项目',
						minWidth: 120,
						align: 'center',
						tooltip: true
					},
					{
						key: 'maintenanceTeam',
						title: '维修方',
						width: 90,
						align: 'center',
						render: (h, params) => {
							return h('span', params.row.maintenanceTeam == '1' ? "企业内修" : params.row
								.maintenanceTeam == '2' ? "外包队伍" : '')
						}
					},
					{
						key: 'teamName',
						title: '队伍名称',
						minWidth: 110,
						align: 'center',
						tooltip: true
					},
					{
						key: 'planMaintenance',
						title: '计划维修时间',
						minWidth: 130,
						align: 'center',
						render: (h, params) => {
							return h('span', this.renderViewDate(params.row.planMaintenanceStart) + '至' + this
								.renderViewDate(params.row.planMaintenanceEnd))
						}
					},
				],
				modelExam: false,
			}
		},
		mounted() {
			// this.setTableHeight();
			this.tableHeight = 300
			this.dataToQuery.year1 = new Date()
			this.dataToQuery.year = new Date().getFullYear().toString()
			this.query();
		},
		methods: {
			...pageCommonFunction,

			async viewModelExam(row) {
				this.dataToView = {
					...row.examConstruction
				}
				await this.getFiles1('id', 'examSelect')
				this.modelExam = true
				setTimeout(() => {
					this.dialogVisibleChangeHandele(this.modelExam)
				}, 100)
			},
			queryExamSelect() {
				this.examSelectWorkVisible = false
				this.examSelectVisible = true
				this.pagedata1.loading = true
			  let map = {}
				switch(this.echartsName){
					case '内部队伍维修':
						map.teamBelongs = 'nei'
						break;
					case '外部队伍维修':
						map.teamBelongs = 'wai'
						break;
					case '共同维修':
						map.teamBelongs = 'all1'
						break;
					case '未开始':
						map.repairStatus = this.echartsName
						break;
				}
					
				let data = {
					startPage: this.pagedata1.currentPage,
					size: this.pagedata1.pageSize,
					conditions: {
						...this.dataToQuery,
						...map
					}
				};
				this.modalTitle = '检维修计划(' + this.echartsName + ')'

				this.$http.post(Api.queryExamRecords, data).then((res) => {
					if (res.data.status === 201) {
						this.$Message.error(res.data.msg);
					}
					this.examSelectInfo = res.data.data.data;
					this.pagedata1.total = res.data.data.totalSize;
					this.pagedata1.loading = false
				}).catch(e => {
					this.$Message.error("数据获取失败")
					this.pageStatus1.loading = false
				})
			},
			queryExamSelectWork() {
				this.examSelectWorkVisible = true
				this.examSelectVisible = false
				this.pagedata1.loading = true
				let map = {}
				if (this.echartsName == '维修中' || this.echartsName == '已完成') {
					map = {
						...this.dataToQuery,
						repairStatus:this.echartsName
					}
				} else{
					switch(this.echartsName){
						case '1-3月':
							map = {
								...this.dataToQuery,
								monthAll:this.arrayToInFormat([1,2,3])
							}
							break;
						case '4-6月':
						  map = {
						  	...this.dataToQuery,
						  	monthAll:this.arrayToInFormat([4,5,6])
						  }
							break;
						case '7-9月':
						  map = {
						  	...this.dataToQuery,
						  	monthAll:this.arrayToInFormat([7,8,9])
						  }
							break;
						case '10-12月':
						  map = {
						  	...this.dataToQuery,
						  	monthAll:this.arrayToInFormat([10,11,12])
						  }
							break;
						default:
						  map.categories = this.echartsName
							break;
					}
				}
				let data = {
					startPage: this.pagedata1.currentPage,
					size: this.pagedata1.pageSize,
					conditions: {
						...map
					}
				};
				this.modalTitle = '检维修作业(' + this.echartsName + ')'

				this.$http.post(Api.queryExamRecords.replace('ExamRecord', 'ExamRecord/work'), data).then((res) => {
			 	if (res.data.status === 201) {
						this.$Message.error(res.data.msg);
					}
					this.examSelectWorkInfo = res.data.data.data;
					this.pagedata1.total = res.data.data.totalSize;
					this.pagedata1.loading = false
				}).catch(e => {
					this.$Message.error("数据获取失败")
					this.pageStatus1.loading = false
				})
			},
			pageChange1(pageNum) {
				this.pagedata1.currentPage = pageNum;
				this.queryModel();
			},
			pageSizeChange1(pageSize) {
				this.pagedata1.pageSize = pageSize;
				this.queryModel();
			},
			queryModel() {
				if (['内部队伍维修','外部队伍维修','共同维修','未开始'].includes(this.echartsName)) {
					this.queryExamSelect()
				} else {
					this.queryExamSelectWork()
				}
			},

			reset1() {
				this.dataToQuery = {
					year1: new Date(),
					year: new Date().getFullYear().toString()
				};
				if (this.$refs.queryOrgCascader) {
					this.$refs.queryOrgCascader.resetCurrentOrg();
				}
				this.pagedata.currentPage = 1
				this.query()
			},
			query() {
				if (this.dataToQuery.companyId) {
					this.dataToQuery.orgId = this.dataToQuery.companyId
				} else {
					this.dataToQuery.orgId = this.currentUser.companyId
				}
				this.queryAjax();
			},
			queryAjax() {
				this.pageStatus.loading = true
				let data = {
					startPage: this.pagedata.currentPage,
					size: this.pagedata.pageSize,
					conditions: this.dataToQuery
				};
				let seriesRadius = {radius: ['40%', '70%']}
				let container1 = echarts.init(this.$refs.echart1);
				let container2 = echarts.init(this.$refs.echart2);
				let container3 = echarts.init(this.$refs.echart3);
				let container4 = echarts.init(this.$refs.echart4);

				this.$http.post(this.queryUrl, data).then((res) => {
					if (res.data.status === 201) {
						this.$Message.error(res.data.msg);
					}
					if (res.data.status === 200) {
						this.dataTable = res.data.data.data;
						// this.pagedata.total = res.data.data.totalSize;
						this.pageStatus.loading = false
						this.dataMap = res.data.data.dataMap;
						let option1 = this.getOption(this.dataMap.categoriesList, '正在进行维修类别',seriesRadius);
						container1.setOption(option1);
						container1.on('click', (param) => {
							this.modelVisible = true
							event.stopPropagation() // 阻止冒泡
							this.echartsName = param.name;
							this.queryModel()
						});
						window.onresize = container1.resize;

						let option2 = this.getOption(this.dataMap.repairStatuList, '本年度维修状态',seriesRadius);
						container2.setOption(option2);
						container2.on('click', (param) => {
							this.modelVisible = true
							event.stopPropagation() // 阻止冒泡
							this.echartsName = param.name;
							this.queryModel()
						});
						window.onresize = container2.resize;
						
						let option3 = this.getOption(this.dataMap.workMonthList, '维修开始时间段统计');
						container3.setOption(option3);
						container3.on('click', (param) => {
							this.modelVisible = true
							event.stopPropagation() // 阻止冒泡
							this.echartsName = param.name;
							this.queryModel()
						});
						window.onresize = container3.resize;
						
						let option4 = this.getOption(this.dataMap.teamList, '维修方维修数量统计');
						container4.setOption(option4);
						container4.on('click', (param) => {
							this.modelVisible = true
							event.stopPropagation() // 阻止冒泡
							this.echartsName = param.name;
							this.queryModel()
						});
						window.onresize = container4.resize;
					}
				}).catch(e => {
					this.$Message.error("数据获取失败")
					this.pageStatus.loading = false
				})
			},

			getOption(data, titleName,seriesRadius) {
				return {
					title: {
						text: titleName,
						textStyle: {
							fontSize: 14,
						},
						left: 'center'
					},
					tooltip: {
						show: true,
					},
					legend: {
						icon: "circle",
						orient: 'vertical',
						right: '15%',
						y: "center",
						type: 'scroll',
						itemHeight: 18,
						tooltip: {
							show: true
						},
						formatter: function(name) {
							let total = 0;
							let target;
							for (let i = 0; i < data.length; i++) {
								total += data[i].value;
								if (data[i].name == name) {
									target = data[i].value;
								}
							}
							if (!target) {
								target = 0;
							}
							let percentage = 0
							if (total) {

								percentage = ((target / total) * 100).toFixed(2) + '%';
							}

							return name + '  ' + target + '  ' + percentage;
						},
					},
					color: ['#42A5F5', '#4CD1A8', '#FFC310', '#FD5C50'],
					series: [{
						// name: titleName,
						type: 'pie',
						// radius: ['40%', '70%'],
						...seriesRadius,
						center: ["25%", "50%"],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 8,
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: false,
							}
						},
						labelLine: {
							show: false
						},
						data: data
					}]
				};
			},
		},
		watch: {
			'dataTable': function() {
				// this.dataTable.forEach(m=>{
				//     if (m.briefId === '-1') {
				//         m['_disableExpand'] = true
				//     }
				// })
			}
		},
	}
</script>

<style lang='css' scoped>
	.ivu-form-item {
		padding-right: 20px;
	}

	.query-form-el,
	.ivu-date-picker,
	.ivu-input-wrapper {
		width: 100%;
	}

	p {
		display: inline-block;
		font-size: 18px;
	}
</style>
